import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Progress } from './ui/progress';
import { Avatar, AvatarFallback } from './ui/avatar';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { 
  Brain,
  Trophy,
  Timer,
  Play,
  BarChart3,
  Award,
  Lightbulb,
  User,
  Sword,
  Bot,
  Zap,
  Crown,
  Flame,
  Star,
  Sparkles,
  Gamepad2,
  Swords,
  Users,
  Target,
  Badge as BadgeIcon
} from 'lucide-react';
import { motion } from 'motion/react';
import { TestResult, UserProfile, Achievement, TestType } from '../types';
import { tests, testCategories } from '../constants/tests';
import { calculateStreakDays } from '../utils/achievements';
import { Dashboard } from './Dashboard';
import { LanguageSelector } from './LanguageSelector';
import { useLanguage } from '../contexts/LanguageContext';

interface HomePageProps {
  testResults: TestResult[];
  userProfile: UserProfile;
  achievements: Achievement[];
  onStartTest: (testType: TestType | 'ai-battle') => void;
  activeTab?: string;
  onTabChange?: (tab: string) => void;
}

export function HomePage({ 
  testResults, 
  userProfile, 
  achievements, 
  onStartTest,
  activeTab = 'tests',
  onTabChange
}: HomePageProps) {
  const { t } = useLanguage();
  const streakDays = calculateStreakDays(testResults);
  
  // 计算AI对战统计
  const aiBattleResults = testResults.filter(r => r.details?.battleMode);
  const aiBattleWins = aiBattleResults.filter(r => r.details?.winner === 'player').length;
  const aiBattleWinRate = aiBattleResults.length > 0 ? Math.round((aiBattleWins / aiBattleResults.length) * 100) : 0;

  // 颜色映射函数：将图标颜色转换为对应的浅色背景
  const getIconBackground = (color: string) => {
    const colorMap: Record<string, string> = {
      'text-yellow-500': 'bg-gradient-to-br from-yellow-50 to-yellow-100 border border-yellow-200/60',
      'text-blue-500': 'bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200/60',
      'text-purple-500': 'bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200/60',
      'text-green-500': 'bg-gradient-to-br from-green-50 to-green-100 border border-green-200/60',
      'text-red-500': 'bg-gradient-to-br from-red-50 to-red-100 border border-red-200/60',
      'text-pink-500': 'bg-gradient-to-br from-pink-50 to-pink-100 border border-pink-200/60',
      'text-indigo-500': 'bg-gradient-to-br from-indigo-50 to-indigo-100 border border-indigo-200/60',
      'text-orange-500': 'bg-gradient-to-br from-orange-50 to-orange-100 border border-orange-200/60',
      'text-teal-500': 'bg-gradient-to-br from-teal-50 to-teal-100 border border-teal-200/60',
      'text-cyan-500': 'bg-gradient-to-br from-cyan-50 to-cyan-100 border border-cyan-200/60',
      // 新添加的五个测试功能颜色
      'text-amber-500': 'bg-gradient-to-br from-amber-50 to-amber-100 border border-amber-200/60',
      'text-rose-500': 'bg-gradient-to-br from-rose-50 to-rose-100 border border-rose-200/60',
      'text-violet-500': 'bg-gradient-to-br from-violet-50 to-violet-100 border border-violet-200/60',
      'text-emerald-500': 'bg-gradient-to-br from-emerald-50 to-emerald-100 border border-emerald-200/60',
      'text-sky-500': 'bg-gradient-to-br from-sky-50 to-sky-100 border border-sky-200/60',
    };
    return colorMap[color] || 'bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200/60';
  };

  // 获取悬浮时的边框颜色
  const getHoverBorder = (color: string) => {
    const hoverMap: Record<string, string> = {
      'text-yellow-500': 'group-hover:border-yellow-300/80',
      'text-blue-500': 'group-hover:border-blue-300/80',
      'text-purple-500': 'group-hover:border-purple-300/80',
      'text-green-500': 'group-hover:border-green-300/80',
      'text-red-500': 'group-hover:border-red-300/80',
      'text-pink-500': 'group-hover:border-pink-300/80',
      'text-indigo-500': 'group-hover:border-indigo-300/80',
      'text-orange-500': 'group-hover:border-orange-300/80',
      'text-teal-500': 'group-hover:border-teal-300/80',
      'text-cyan-500': 'group-hover:border-cyan-300/80',
      // 新添加的五个测试功能悬浮边框颜色
      'text-amber-500': 'group-hover:border-amber-300/80',
      'text-rose-500': 'group-hover:border-rose-300/80',
      'text-violet-500': 'group-hover:border-violet-300/80',
      'text-emerald-500': 'group-hover:border-emerald-300/80',
      'text-sky-500': 'group-hover:border-sky-300/80',
    };
    return hoverMap[color] || 'group-hover:border-slate-300/80';
  };

  // 将文本颜色转换为背景渐变颜色（用于分类圆点）
  const getBackgroundGradient = (textColor: string) => {
    const gradientMap: Record<string, string> = {
      'text-blue-500': 'from-blue-400 to-blue-600',
      'text-green-500': 'from-green-400 to-green-600', 
      'text-purple-500': 'from-purple-400 to-purple-600',
      'text-yellow-500': 'from-yellow-400 to-yellow-600',
      'text-red-500': 'from-red-400 to-red-600',
      'text-pink-500': 'from-pink-400 to-pink-600',
      'text-indigo-500': 'from-indigo-400 to-indigo-600',
      'text-orange-500': 'from-orange-400 to-orange-600',
      'text-teal-500': 'from-teal-400 to-teal-600',
      'text-cyan-500': 'from-cyan-400 to-cyan-600',
      // 新添加的测试分类颜色
      'text-emerald-500': 'from-emerald-400 to-emerald-600',
    };
    return gradientMap[textColor] || 'from-slate-400 to-slate-600';
  };

  // 动画变体配置
  const containerVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        ease: "easeOut",
        staggerChildren: 0.1
      }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut"
      }
    }
  };

  const achievementVariants = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.4,
        ease: "easeOut"
      }
    },
    hover: {
      scale: 1.05,
      transition: {
        duration: 0.2,
        ease: "easeOut"
      }
    }
  };

  // 测试卡片动画变体
  const testCardVariants = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.4,
        ease: "easeOut"
      }
    },
    hover: {
      scale: 1.02,
      y: -4,
      transition: {
        duration: 0.2,
        ease: "easeOut"
      }
    }
  };

  // 侧边栏卡片动画变体 - 优化显示速度
  const sidebarVariants = {
    hidden: { opacity: 0, x: 20 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 0.3,
        ease: "easeOut",
        staggerChildren: 0.08
      }
    }
  };

  const sidebarItemVariants = {
    hidden: { opacity: 0, x: 15 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 0.25,
        ease: "easeOut"
      }
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/50 to-indigo-50">
      {/* Enhanced Header */}
      <header className="border-b bg-white/70 backdrop-blur-xl sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <motion.div 
                className="w-12 h-12 bg-gradient-to-br from-slate-600 via-gray-700 to-slate-800 rounded-xl flex items-center justify-center shadow-lg"
                whileHover={{ 
                  scale: 1.05,
                  rotate: 5,
                  transition: { duration: 0.2 }
                }}
              >
                <Brain className="w-7 h-7 text-white" />
              </motion.div>
              <div>
                <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-700 via-gray-800 to-slate-900 bg-clip-text text-transparent">
                  {t('header.title')}
                </h1>
                <p className="text-slate-600">{t('header.subtitle')}</p>
              </div>
            </div>
            
            <div className="flex items-center gap-4">
              {/* Quick Stats */}
              <div className="hidden md:flex items-center gap-6">
                <motion.div 
                  className="text-center"
                  whileHover={{ scale: 1.05 }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                    {testResults.length}
                  </div>
                  <div className="text-xs text-slate-500">已完成测试</div>
                </motion.div>
                <motion.div 
                  className="text-center"
                  whileHover={{ scale: 1.05 }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="text-xl font-bold bg-gradient-to-r from-emerald-600 to-green-600 bg-clip-text text-transparent">
                    {userProfile.averageScore}
                  </div>
                  <div className="text-xs text-slate-500">平均分数</div>
                </motion.div>
                {aiBattleResults.length > 0 && (
                  <motion.div 
                    className="text-center"
                    whileHover={{ scale: 1.05 }}
                    transition={{ duration: 0.2 }}
                  >
                    <div className="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">
                      {aiBattleWinRate}%
                    </div>
                    <div className="text-xs text-slate-500">AI胜率</div>
                  </motion.div>
                )}
                <motion.div 
                  className="text-center"
                  whileHover={{ scale: 1.05 }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                    Lv.{userProfile.level}
                  </div>
                  <div className="text-xs text-slate-500">当前等级</div>
                </motion.div>
              </div>
              
              {/* User Menu */}
              <div className="flex items-center gap-2">
                <LanguageSelector />
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={() => onStartTest('profile')}
                  className="flex items-center gap-2 hover:bg-blue-50 hover:text-blue-700 transition-all duration-200"
                >
                  <User className="w-4 h-4" />
                  {userProfile.name}
                </Button>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div className="container mx-auto px-4 py-8">
        <Tabs value={activeTab} onValueChange={onTabChange} className="space-y-8">
          <TabsList className="grid w-full grid-cols-4 bg-white/70 backdrop-blur-sm border border-slate-200 shadow-sm h-12 p-1">
            <TabsTrigger 
              value="tests" 
              className="flex items-center justify-center gap-2 h-10 px-4 py-2 data-[state=active]:bg-gradient-to-r data-[state=active]:from-slate-600 data-[state=active]:to-gray-700 data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-200"
            >
              <Play className="w-4 h-4 flex-shrink-0" />
              <span className="leading-none">开始测试</span>
            </TabsTrigger>
            <TabsTrigger 
              value="ai-battle" 
              className="flex items-center justify-center gap-2 h-10 px-4 py-2 data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-600 data-[state=active]:to-indigo-600 data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-200"
            >
              <Brain className="w-4 h-4 flex-shrink-0" />
              <span className="leading-none">AI对战</span>
            </TabsTrigger>
            <TabsTrigger 
              value="dashboard" 
              className="flex items-center justify-center gap-2 h-10 px-4 py-2 data-[state=active]:bg-gradient-to-r data-[state=active]:from-slate-600 data-[state=active]:to-gray-700 data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-200"
            >
              <BarChart3 className="w-4 h-4 flex-shrink-0" />
              <span className="leading-none">数据面板</span>
            </TabsTrigger>
            <TabsTrigger 
              value="achievements" 
              className="flex items-center justify-center gap-2 h-10 px-4 py-2 data-[state=active]:bg-gradient-to-r data-[state=active]:from-slate-600 data-[state=active]:to-gray-700 data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-200"
            >
              <Award className="w-4 h-4 flex-shrink-0" />
              <span className="leading-none">成就徽章</span>
            </TabsTrigger>
          </TabsList>

          <TabsContent value="tests" className="space-y-8">
            <motion.div
              variants={containerVariants}
              initial="hidden"
              animate="visible"
            >
              {/* Quick Start Section */}
              <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <div className="lg:col-span-3 space-y-6">
                  {/* Recommended Tests */}
                  <motion.div variants={itemVariants}>
                    <Card className="mb-8 bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
                      <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                          <Target className="w-5 h-5 text-blue-600" />
                          推荐测试
                        </CardTitle>
                        <CardDescription>
                          基于你的测试历史为你推荐的测试项目
                        </CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                          {tests.slice(0, 4).map((test, index) => {
                            const Icon = test.icon;
                            const isCompleted = testResults.some(r => r.testType === test.title);
                            
                            return (
                              <motion.div
                                key={test.id}
                                initial={{ opacity: 0, scale: 0.9 }}
                                animate={{ opacity: 1, scale: 1 }}
                                transition={{ duration: 0.3, delay: index * 0.1 }}
                                whileHover={{ scale: 1.02 }}
                                whileTap={{ scale: 0.98 }}
                              >
                                <Card 
                                  className="h-full bg-white/90 hover:bg-white hover:shadow-lg transition-all duration-300 cursor-pointer group relative overflow-hidden"
                                  onClick={() => onStartTest(test.id)}
                                >
                                  <CardContent className="p-4">
                                    <div className="flex items-start gap-3">
                                      <div className={`w-10 h-10 rounded-lg ${getIconBackground(test.color)} ${getHoverBorder(test.color)} flex items-center justify-center shadow-md group-hover:shadow-lg transition-all duration-300`}>
                                        <Icon className={`w-5 h-5 ${test.color} group-hover:scale-110 transition-transform duration-300`} />
                                      </div>
                                      <div className="flex-1 min-w-0">
                                        <h3 className="font-semibold mb-1 text-slate-800 group-hover:text-blue-600 transition-colors">{test.title}</h3>
                                        <p className="text-sm text-slate-600 mb-2 line-clamp-2">{test.description}</p>
                                        <div className="flex items-center justify-between">
                                          <Badge variant="outline" className={
                                            test.difficulty === '简单' ? 'bg-green-100 text-green-700 border-green-200' :
                                            test.difficulty === '中等' ? 'bg-yellow-100 text-yellow-700 border-yellow-200' :
                                            'bg-red-100 text-red-700 border-red-200'
                                          }>
                                            {test.difficulty}
                                          </Badge>
                                          <div className="flex items-center gap-1 text-xs text-slate-500">
                                            <Timer className="w-3 h-3" />
                                            {test.duration}
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </CardContent>
                                  
                                  {/* Hover overlay */}
                                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                                </Card>
                              </motion.div>
                            );
                          })}
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>

                  {/* Test Categories */}
                  {Object.entries(testCategories).map(([categoryId, category], categoryIndex) => (
                    <motion.div
                      key={categoryId}
                      variants={itemVariants}
                      custom={categoryIndex}
                    >
                      <Card className="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300">
                        <CardHeader className="border-b border-slate-100">
                          <CardTitle className="flex items-center gap-2">
                            <div className={`w-3 h-3 rounded-full bg-gradient-to-r ${getBackgroundGradient(category.color)} shadow-sm`} />
                            {category.name}
                          </CardTitle>
                          <CardDescription className="text-slate-600">{category.description}</CardDescription>
                        </CardHeader>
                        <CardContent className="p-6">
                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            {tests
                              .filter(test => test.category === categoryId)
                              .map((test, testIndex) => {
                                const Icon = test.icon;
                                const isCompleted = testResults.some(r => r.testType === test.title);
                                
                                return (
                                  <motion.div
                                    key={test.id}
                                    variants={testCardVariants}
                                    whileHover="hover"
                                    custom={testIndex}
                                  >
                                    <Card 
                                      className="cursor-pointer bg-white/80 backdrop-blur-sm border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 group"
                                      onClick={() => onStartTest(test.id)}
                                    >
                                      <CardContent className="p-4">
                                        <div className="space-y-3">
                                          <div className="flex items-start justify-between">
                                            <div className={`w-10 h-10 rounded-lg ${getIconBackground(test.color)} ${getHoverBorder(test.color)} flex items-center justify-center shadow-md group-hover:shadow-lg transition-all duration-300`}>
                                              <Icon className={`w-5 h-5 ${test.color} group-hover:scale-110 transition-transform duration-300`} />
                                            </div>
                                            {isCompleted && (
                                              <Badge variant="secondary" className="text-xs bg-yellow-100 text-yellow-800 border-yellow-200">
                                                <Trophy className="w-3 h-3 mr-1" />
                                                已完成
                                              </Badge>
                                            )}
                                          </div>
                                          
                                          <div>
                                            <h3 className="font-semibold text-sm mb-1 text-slate-700 group-hover:text-blue-700 transition-colors duration-300">
                                              {test.title}
                                            </h3>
                                            <p className="text-xs text-slate-500 mb-2 line-clamp-2">{test.description}</p>
                                            
                                            <div className="flex items-center justify-between">
                                              <div className="flex items-center gap-2">
                                                <Badge 
                                                  variant="outline" 
                                                  className="text-xs border-slate-200 text-slate-600 hover:border-blue-300 hover:text-blue-700 transition-colors duration-300"
                                                >
                                                  {test.difficulty}
                                                </Badge>
                                              </div>
                                              <div className="flex items-center gap-1 text-xs text-slate-500">
                                                <Timer className="w-3 h-3" />
                                                {test.duration}
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </CardContent>
                                    </Card>
                                  </motion.div>
                                );
                              })}
                          </div>
                        </CardContent>
                      </Card>
                    </motion.div>
                  ))}
                </div>

                {/* Sidebar */}
                <motion.div 
                  className="space-y-6"
                  variants={sidebarVariants}
                  initial="hidden"
                  animate="visible"
                >
                  {/* User Stats */}
                  <motion.div variants={sidebarItemVariants}>
                    <Card className="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300">
                      <CardHeader className="border-b border-slate-100">
                        <CardTitle className="text-base">您的统计</CardTitle>
                      </CardHeader>
                      <CardContent className="p-6 space-y-4">
                        <div className="text-center">
                          <Avatar className="w-16 h-16 mx-auto mb-3 ring-4 ring-slate-100 hover:ring-slate-200 transition-all duration-300">
                            <AvatarFallback className="bg-gradient-to-br from-slate-600 to-gray-700 text-white">
                              <User className="w-8 h-8" />
                            </AvatarFallback>
                          </Avatar>
                          <h3 className="font-semibold text-slate-700">{userProfile.name}</h3>
                          <p className="text-sm text-slate-500">等级 {userProfile.level}</p>
                        </div>
                        
                        <div className="space-y-3">
                          <div className="flex justify-between text-sm">
                            <span className="text-slate-600">测试完成</span>
                            <span className="font-semibold text-slate-700">{testResults.length}/{tests.length}</span>
                          </div>
                          <Progress 
                            value={(testResults.length / tests.length) * 100} 
                            className="h-3" 
                          />
                        </div>
                        
                        <div className="grid grid-cols-2 gap-3 text-center">
                          <div className="p-3 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border border-blue-100 hover:shadow-md transition-all duration-300">
                            <div className="text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                              {userProfile.averageScore}
                            </div>
                            <div className="text-xs text-slate-500">平均分</div>
                          </div>
                          <div className="p-3 bg-gradient-to-br from-orange-50 to-red-50 rounded-lg border border-orange-100 hover:shadow-md transition-all duration-300">
                            <div className="text-lg font-bold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">
                              {streakDays}
                            </div>
                            <div className="text-xs text-slate-500">连续天数</div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>

                  {/* Recent Achievements */}
                  <motion.div variants={sidebarItemVariants}>
                    <Card className="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300">
                      <CardHeader className="border-b border-slate-100">
                        <CardTitle className="text-base">最新成就</CardTitle>
                      </CardHeader>
                      <CardContent className="p-6">
                        <div className="space-y-3">
                          {achievements
                            .filter(a => a.unlocked)
                            .slice(-3)
                            .map((achievement) => {
                              const Icon = achievement.icon;
                              return (
                                <motion.div 
                                  key={achievement.id} 
                                  className="flex items-center gap-3 p-2 rounded-lg hover:bg-yellow-50 transition-colors duration-200"
                                  whileHover={{ scale: 1.02, x: 4 }}
                                  transition={{ duration: 0.2 }}
                                >
                                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center shadow-sm">
                                    <Icon className="w-4 h-4 text-white" />
                                  </div>
                                  <div className="flex-1">
                                    <p className="text-sm font-medium text-slate-700">{achievement.name}</p>
                                    <p className="text-xs text-slate-500">{achievement.description}</p>
                                  </div>
                                </motion.div>
                              );
                            })}
                          
                          {achievements.filter(a => a.unlocked).length === 0 && (
                            <div className="text-center py-6">
                              <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-slate-100 flex items-center justify-center">
                                <Trophy className="w-6 h-6 text-slate-400" />
                              </div>
                              <p className="text-sm text-slate-500">完成测试来解锁成就</p>
                            </div>
                          )}
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                </motion.div>
              </div>
            </motion.div>
          </TabsContent>

          <TabsContent value="dashboard">
            <motion.div
              variants={containerVariants}
              initial="hidden"
              animate="visible"
            >
              <Dashboard 
                testResults={testResults} 
                userProfile={userProfile} 
                achievements={achievements}
                onStartTest={onStartTest}
              />
            </motion.div>
          </TabsContent>

          <TabsContent value="ai-battle" className="space-y-6">
            <motion.div
              variants={containerVariants}
              initial="hidden"
              animate="visible"
            >
              {/* AI对战统计概览 */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
                  <CardContent className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
                        <Swords className="w-6 h-6 text-white" />
                      </div>
                      <div>
                        <p className="text-sm text-blue-600">AI对战次数</p>
                        <p className="text-2xl font-bold text-blue-700">{aiBattleResults.length}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                
                <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-green-200">
                  <CardContent className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                        <Trophy className="w-6 h-6 text-white" />
                      </div>
                      <div>
                        <p className="text-sm text-green-600">AI对战胜率</p>
                        <p className="text-2xl font-bold text-green-700">{aiBattleWinRate}%</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                
                <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
                  <CardContent className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center">
                        <Crown className="w-6 h-6 text-white" />
                      </div>
                      <div>
                        <p className="text-sm text-purple-600">当前排名</p>
                        <p className="text-2xl font-bold text-purple-700">#42</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

              {/* AI对战介绍卡片 */}
              <Card className="mb-6 bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 border-blue-200 overflow-hidden">
                <CardHeader className="relative">
                  <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full opacity-10 transform translate-x-16 -translate-y-8"></div>
                  <CardTitle className="flex items-center gap-3 text-2xl text-blue-700 relative z-10">
                    <motion.div
                      animate={{ rotate: [0, 10, -10, 0] }}
                      transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
                    >
                      <Swords className="w-7 h-7" />
                    </motion.div>
                    AI智能对战中心
                    <motion.div
                      animate={{ scale: [1, 1.2, 1] }}
                      transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
                    >
                      <Sparkles className="w-5 h-5 text-yellow-500" />
                    </motion.div>
                  </CardTitle>
                  <CardDescription className="text-base text-blue-600">
                    全新升级！支持单人对战、团队对战和全球排行榜竞技
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid md:grid-cols-3 gap-4">
                    <div className="space-y-2">
                      <h4 className="font-semibold flex items-center gap-2 text-blue-700">
                        <Gamepad2 className="w-4 h-4" />
                        单人对战
                      </h4>
                      <ul className="text-sm space-y-1 text-muted-foreground">
                        <li className="flex items-center gap-2">
                          <Zap className="w-3 h-3 text-yellow-500" />
                          5轮快速挑战
                        </li>
                        <li className="flex items-center gap-2">
                          <Timer className="w-3 h-3 text-blue-500" />
                          每题15秒限时
                        </li>
                        <li className="flex items-center gap-2">
                          <Target className="w-3 h-3 text-green-500" />
                          实时AI对决
                        </li>
                      </ul>
                    </div>
                    <div className="space-y-2">
                      <h4 className="font-semibold flex items-center gap-2 text-blue-700">
                        <Users className="w-4 h-4" />
                        团队对战
                      </h4>
                      <ul className="text-sm space-y-1 text-muted-foreground">
                        <li className="flex items-center gap-2">
                          <Star className="w-3 h-3 text-purple-500" />
                          2v2 或 3v3 模式
                        </li>
                        <li className="flex items-center gap-2">
                          <Brain className="w-3 h-3 text-indigo-500" />
                          更复杂的挑战
                        </li>
                        <li className="flex items-center gap-2">
                          <Award className="w-3 h-3 text-green-500" />
                          团队协作积分
                        </li>
                      </ul>
                    </div>
                    <div className="space-y-2">
                      <h4 className="font-semibold flex items-center gap-2 text-blue-700">
                        <Trophy className="w-4 h-4" />
                        排位系统
                      </h4>
                      <ul className="text-sm space-y-1 text-muted-foreground">
                        <li className="flex items-center gap-2">
                          <Crown className="w-3 h-3 text-yellow-500" />
                          全球排行榜
                        </li>
                        <li className="flex items-center gap-2">
                          <Flame className="w-3 h-3 text-red-500" />
                          赛季奖励系统
                        </li>
                        <li className="flex items-center gap-2">
                          <BarChart3 className="w-3 h-3 text-purple-500" />
                          段位晋升机制
                        </li>
                      </ul>
                    </div>
                  </div>
                  
                  <motion.div
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <Button 
                      size="lg" 
                      className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
                      onClick={() => onStartTest('ai-battle')}
                    >
                      <div className="flex items-center gap-3">
                        <motion.div
                          animate={{ rotate: 360 }}
                          transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
                        >
                          <Gamepad2 className="w-5 h-5" />
                        </motion.div>
                        <span className="font-semibold">进入AI对战中心</span>
                        <motion.div
                          animate={{ x: [0, 5, 0] }}
                          transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
                        >
                          <Swords className="w-4 h-4" />
                        </motion.div>
                      </div>
                    </Button>
                  </motion.div>
                </CardContent>
              </Card>

              {/* AI对手预览和最近战绩 */}
              <div className="grid lg:grid-cols-2 gap-6">
                {/* AI角色预览 */}
                <Card className="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Bot className="w-5 h-5 text-blue-600" />
                      AI对手阵容
                    </CardTitle>
                    <CardDescription>4个不同个性的AI对手等你挑战</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-4">
                      {[
                        { name: 'R.O.O.K.I.E', emoji: '🤖', level: 1, desc: '友好新手', color: 'from-green-400 to-green-600' },
                        { name: '策略大师', emoji: '🧠', level: 2, desc: '逻辑思维', color: 'from-blue-400 to-blue-600' },
                        { name: '闪电侠', emoji: '⚡', level: 3, desc: '极速反应', color: 'from-yellow-400 to-orange-600' },
                        { name: '终极智脑', emoji: '👑', level: 4, desc: '全能型', color: 'from-purple-400 to-pink-600' }
                      ].map((ai, index) => (
                        <motion.div
                          key={ai.name}
                          initial={{ opacity: 0, scale: 0.9 }}
                          animate={{ opacity: 1, scale: 1 }}
                          transition={{ delay: index * 0.1 }}
                          className="group"
                        >
                          <Card className="text-center p-3 hover:shadow-lg transition-all duration-300 group-hover:scale-105 bg-white/80 backdrop-blur-sm">
                            <div className="text-2xl mb-2 group-hover:scale-110 transition-transform">
                              {ai.emoji}
                            </div>
                            <h3 className="font-semibold text-sm text-slate-700">{ai.name}</h3>
                            <p className="text-xs text-slate-500 mb-2">{ai.desc}</p>
                            <div className="flex items-center justify-center gap-1">
                              {Array.from({ length: ai.level }, (_, i) => (
                                <Star key={i} className="w-2 h-2 fill-yellow-400 text-yellow-400" />
                              ))}
                            </div>
                            <div className={`mt-2 h-1 rounded-full bg-gradient-to-r ${ai.color} opacity-60`}></div>
                          </Card>
                        </motion.div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

                {/* 最近战绩 */}
                <Card className="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <BarChart3 className="w-5 h-5 text-green-600" />
                      最近战绩
                    </CardTitle>
                    <CardDescription>你的AI对战历史记录</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {aiBattleResults.length > 0 ? (
                      <div className="space-y-3">
                        {testResults
                          .filter(r => r.details?.battleMode)
                          .slice(-5)
                          .reverse()
                          .map((result, index) => (
                          <div key={index} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                            <div className="flex items-center gap-3">
                              <Badge 
                                variant={result.details?.winner === 'player' ? 'default' : 'destructive'}
                                className="w-6 h-6 p-0 flex items-center justify-center text-xs"
                              >
                                {result.details?.winner === 'player' ? 'W' : 'L'}
                              </Badge>
                              <div>
                                <p className="font-medium text-sm">{result.testType}</p>
                                <p className="text-xs text-slate-500">
                                  {result.date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })}
                                </p>
                              </div>
                            </div>
                            <div className="text-right">
                              <p className="font-semibold text-sm">{result.score}</p>
                              <p className="text-xs text-slate-500">分数</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="text-center py-6 text-slate-500">
                        <Gamepad2 className="w-12 h-12 mx-auto mb-3 opacity-50" />
                        <p className="text-sm">还没有AI对战记录</p>
                        <p className="text-xs">开始你的第一场AI对战吧！</p>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>
            </motion.div>
          </TabsContent>

          <TabsContent value="achievements" className="space-y-6">
            <motion.div
              variants={containerVariants}
              initial="hidden"
              animate="visible"
            >
              {/* 成就徽章标题和统计 */}
              <motion.div 
                variants={itemVariants}
                className="text-center mb-8"
              >
                <h2 className="text-3xl font-bold mb-2 bg-gradient-to-r from-yellow-500 via-amber-500 to-orange-500 bg-clip-text text-transparent">
                  成就徽章
                </h2>
                <p className="text-slate-600 mb-6">
                  您已解锁 {achievements.filter(a => a.unlocked).length} / {achievements.length} 个成就
                </p>
                <div className="flex justify-center">
                  <div className="w-80 p-4 bg-white/70 backdrop-blur-sm rounded-xl border border-slate-200 shadow-lg">
                    <Progress 
                      value={(achievements.filter(a => a.unlocked).length / achievements.length) * 100} 
                      className="h-3" 
                    />
                  </div>
                </div>
              </motion.div>

              {/* 成就分类 */}
              <div className="space-y-8">
                {/* 已解锁成就 */}
                <motion.div variants={itemVariants}>
                  <h3 className="text-xl font-semibold mb-6 flex items-center gap-2">
                    <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center shadow-sm">
                      <Trophy className="w-5 h-5 text-white" />
                    </div>
                    已解锁成就 ({achievements.filter(a => a.unlocked).length})
                  </h3>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    {achievements
                      .filter(achievement => achievement.unlocked)
                      .map((achievement, index) => {
                        const Icon = achievement.icon;
                        
                        return (
                          <motion.div
                            key={achievement.id}
                            variants={achievementVariants}
                            whileHover="hover"
                            custom={index}
                          >
                            <Card className="bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50 border-yellow-200 shadow-lg hover:shadow-xl transition-all duration-300">
                              <CardContent className="p-6 text-center h-full flex flex-col">
                                <motion.div 
                                  className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center bg-gradient-to-br from-yellow-400 to-amber-500 text-white shadow-lg"
                                  whileHover={{ 
                                    scale: 1.1,
                                    rotate: 5,
                                    transition: { duration: 0.2 }
                                  }}
                                >
                                  <Icon className="w-8 h-8" />
                                </motion.div>
                                <div className="flex-1 flex flex-col justify-between">
                                  <div>
                                    <h3 className="font-semibold mb-2 text-yellow-800">
                                      {achievement.name}
                                    </h3>
                                    <p className="text-sm text-slate-600 mb-4 line-clamp-3">
                                      {achievement.description}
                                    </p>
                                  </div>
                                  <div>
                                    <Badge variant="secondary" className="bg-yellow-100 text-yellow-800 border-yellow-200 mb-2">
                                      ✓ 已解锁
                                    </Badge>
                                    {achievement.unlockedDate && (
                                      <p className="text-xs text-slate-500">
                                        {achievement.unlockedDate.toLocaleDateString('zh-CN')}
                                      </p>
                                    )}
                                  </div>
                                </div>
                              </CardContent>
                            </Card>
                          </motion.div>
                        );
                      })}
                  </div>
                </motion.div>

                {/* 未解锁成就 */}
                {achievements.filter(a => !a.unlocked).length > 0 && (
                  <motion.div variants={itemVariants}>
                    <h3 className="text-xl font-semibold mb-6 flex items-center gap-2">
                      <div className="w-8 h-8 rounded-lg bg-slate-200 flex items-center justify-center">
                        <Award className="w-5 h-5 text-slate-500" />
                      </div>
                      待解锁成就 ({achievements.filter(a => !a.unlocked).length})
                    </h3>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                      {achievements
                        .filter(achievement => !achievement.unlocked)
                        .map((achievement, index) => {
                          const Icon = achievement.icon;
                          
                          return (
                            <motion.div
                              key={achievement.id}
                              variants={achievementVariants}
                              whileHover="hover"
                              custom={index}
                            >
                              <Card className="opacity-70 bg-white/50 backdrop-blur-sm border-slate-200 hover:opacity-90 hover:shadow-lg transition-all duration-300">
                                <CardContent className="p-6 text-center h-full flex flex-col">
                                  <div className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center bg-slate-200 text-slate-500">
                                    <Icon className="w-8 h-8" />
                                  </div>
                                  <div className="flex-1 flex flex-col justify-between">
                                    <div>
                                      <h3 className="font-semibold mb-2 text-slate-700">{achievement.name}</h3>
                                      <p className="text-sm text-slate-500 mb-4 line-clamp-3">
                                        {achievement.description}
                                      </p>
                                    </div>
                                    <Badge variant="outline" className="border-slate-300 text-slate-600">
                                      🔒 未解锁
                                    </Badge>
                                  </div>
                                </CardContent>
                              </Card>
                            </motion.div>
                          );
                        })}
                    </div>
                  </motion.div>
                )}

                {/* 空状态 */}
                {achievements.length === 0 && (
                  <div className="text-center py-16">
                    <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-slate-100 flex items-center justify-center">
                      <Award className="w-10 h-10 text-slate-400" />
                    </div>
                    <h3 className="text-xl font-semibold mb-2 text-slate-700">暂无成就</h3>
                    <p className="text-slate-500">完成测试来获得您的第一个成就！</p>
                  </div>
                )}
              </div>
            </motion.div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}